<template>
  <div class="basicInf">
        <div class="top">
            <h1>基本信息</h1>
        </div>
        <div class="img">
          <img src="../../assets/img6.png" >
          <p>头像</p>
        </div>
        <span>用户信息</span>
        <van-form >
      <van-field
        v-model="username"
        name="昵称"
        label="昵称"
        placeholder="请输入您的昵称"
        :rules="[{ required: true, message: '请填写昵称' }]"
      />
      <van-field
        v-model="telephone"
        type="text"
        name="手机号码"
        label="手机号码"
        placeholder="请输入您的手机号码"
        :rules="[{ required: true, message: '请填写手机号码' }]"
      />
    </van-form>
    <div class="btns">
      <van-button type="default" block style="color:#fff;">下一步(1/2)</van-button>
      <van-button type="default" block style="color:#fff;">跳过</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BasicInf',
  data() {
    return {
      username: '',
      telephone: '',
    }
  },
  methods: {
  },
}
</script>

<style lang="less" scoped>
.basicInf{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  .top{
    width: 100%;
    height: 200px;
    background-color: #c1ab96;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    h1{
        color: white;
        margin-top: 110px;
        margin-left: 20px;
    }
  }
  .img{
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img{
      width: 200px;
      height: 200px;
    }
    p{
      color:#c1ab96;
    }
  }
  span{
    display: block;
    margin-left: 110px;
    color:#c1ab96;
  }
  form{
    padding-left: 80px;
    .van-cell{
      width: 85%;
      border-bottom: 1px solid #ccc;
    }
  }
  .btns{
    margin-top: 250px;
    margin-bottom: 60px;
    text-align: center;
    /deep/.van-button--normal{
    width: 80%;

    background-color: oldlace;
    border-radius: 20px;
    margin:10px auto;
  }
  }
}
</style>
